<template>
	<div id="SqlCodeFormat">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><h1><i class="el-icon-lx-cascades"></i> sql代码格式化（整理sql语句格式）</h1></el-breadcrumb-item>				
            </el-breadcrumb>
        </div>
		<el-row>
			<el-col :span="12" class="sqlcol">
				<el-card :body-style="{ padding: '0px' }">
					<el-input type="textarea" :autosize="{ minRows: 20, maxRows: 20}" v-model="textarea" placeholder="请输入内容">
					</el-input>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card :body-style="{ padding: '0px' }">
					<el-input type="textarea" :autosize="{ minRows: 20, maxRows: 20}" v-model="sqltext" placeholder="请输入内容">
					</el-input>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-button type="primary" @click="SqlCodeFormatFun">格式化</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import sqlFormatter from "sql-formatter";
	export default {
		data: function() {
			return {
				textarea: '',
				sqltext: ''
			}
		},
		mounted() { //调用
		},
		methods: {
			SqlCodeFormatFun() {
				this.sqltext = sqlFormatter.format(this.textarea)
			}
		},
		watch: {},
		computed: {}
	}
</script>

<style>
	#qrcode {
		display: inline-block;

	}

	.sqlcol{
		border-radius: 4px;
		min-height: 400px;
		/* background-color: #B3E19D; */
		text-align: center;
	}
</style>
